!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #employee {
            margin: 50px auto;
            border-collapse: collapse;
        }

        #employee td,
        #employee th {
            border: 1px solid black;
            padding: 10px;
        }

        form {
            width: 400px;
            margin: 0 auto;
        }

        form div {
            margin: 8px 0;
            text-align: center;
        }
    </style>
</head>
<script>
    //创建超链接的删除函数
    function deleteA() {
        // 获取tr
        let tr = this.parentNode.parentNode;
        // 获取表格中姓名
        let name = tr.firstElementChild.innerHTML;
        // 循环体:确认是否删除这个姓名包括的所有信息
        if (confirm('确认删除' + name + '吗？')) {
            // 用tr的父节点删除tr
            tr.parentNode.removeChild(tr);
        }
        // 取消则返回不执行
        return false;
    }
    window.onload = function () {
        // 获取表格的超链接 a
        const links = document.getElementsByTagName('a');
        for (let i = 0; i < links.length; i++) {
            // 给每一个 a 添加点击事件
            links[i].onclick = deleteA;
        }


        // 获取提交按钮
        const btn = document.getElementById('btn');
        // 给按钮添加点击事件
        btn.onclick = function () {
            // 获取要提交的姓名/邮箱/工资
            let name = document.getElementById('name').value;
            let email = document.getElementById('email').value;
            let salary = document.getElementById('salary').value;
            // 给表格新增一行
            let newTr = document.createElement("tr");
            //给新添加的tr添加td
            newTr.innerHTML = '<td>' + name + '</td>' +
                '<td>' + email + '</td>' +
                '<td>' + salary + '</td>' +
                '<td><a href="javascript:;">删除</a></td>';
            //给获取新添加的 a ，添加点击事件
            const link = newTr.getElementsByTagName('a')[0];
            link.onclick = deleteA;
            // 获取表格
            let employee = document.getElementById('employee');
            // 给tbody添加新tr
            employee.firstElementChild.appendChild(newTr);
        }
    }
</script>

<body>
    <table id="employee">
        <tr>
            <th>姓名</th>
            <th>邮件</th>
            <th>薪资</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>swk@123.com</td>
            <td>1000</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>猪八戒</td>
            <td>zbj@123.com</td>
            <td>2000</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>沙和尚</td>
            <td>shs@123.com</td>
            <td>3000</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
    </table>

    <!-- 创建一个表单 -->
    <form action="#">
        <div>
            姓名 <input id="name" type="text">
        </div>
        <div>
            邮件 <input id="email" type="text">
        </div>
        <div>
            薪资 <input id="salary" type="text">
        </div>
        <div>
            <button id="btn" type="button">提交</button>
        </div>
    </form>

</body>

</html>